[00:00] Welcome back. All right, so we need to flush out our overview a little bit more. I'm thinking we could avoid using the cylindrical tanks here. I would actually, we have a nice vessel component I think I would like to replace these with, the point of this overview screen is I want to give a high level status of our various stations. So station one, station two, and station three, I'm thinking maybe a like an alarm banner and then maybe like the actual fill for each tank. The actual problem though, is that I'm basically going to be rebuilding the same thing three times one for each station. So I did want to talk about one approach or one way to make that a little bit easier for us. Now, if you're used to Ignitions Vision Module, vision had a thing called a template and a template was basically a predefined configuration or grouping of components, that you could then create a bunch of instances or copies of, and perspective does have a similar a feature.

[00:59] Basically you can take a view and then embed that inside of another view multiple times which kind of gives you a similar dynamic. So let's take a look at how to do that. Now, the first thing I'm going to do is I'm actually going to just stay organized. Let's create a new view. So, and actually let's create a new folder. So I'm going to head over to my project browser and I'm going to select the views folder. I'm going to right click on it. I'll create a new folder. And how about we just call this objects? So the whole point of this, things that we're going to put in here is I can call it templates I suppose. But the whole point of this is basically views that we're going to embed inside of another view. So I'll go ahead and create the folder. And then I'll right click on that objects folder or create a new folder or excuse me we'll create a new view and let's call this a review vessel the root container type we'll switch to flux and I'm not going to check the page URL.

[02:00] I don't need a page configured for this view We're going to make here. I don't plan on having my users directly navigate to a page that only has this one view. Again, we're basically going, we're creating this intentionally so it will only ever be embedded elsewhere. So I'll click the create view button. And my thought is, okay, let's have a, like a, the name or the title of the stations, like station one, station two, we'll have that on a label. We'll have like a little alarm banner so we can go ahead and we'll create two labels and then I want to little graphic. So we'll create a vessel. So let's head over to the component panel over here and you can just search for it. How about just a label? I'll expand here. I'll grab two labels actually. And then in the search bar, again, let's look for a vessel and it should be under this symbols area. So we'll grab a vessel and I'll drag that over. Now we know from earlier we know how flux containers work.

[02:59] We can actually have components grow and shrink. I think I'd like the vessel to take up as much space as I can. So I'm going to minimize my component panel there. And with that vessel still selected. We can go down to the position category of properties and I'm going to change grow here. I'll change it to one I'll hit enter and have it resize. Now, when you're embedding views inside of other views you actually have quite a bit of control over how large the embedded view is. So all your normal reasons sizing rules and knowledge is pretty useful here. Now, out of habit I do like to resize the view I'm going to embed just so it looks close to the same size I plan on having it appear as in another view or whatever the basis is. So I don't necessarily want this whole view to be this big. So what I'm going to do is I'm just going to select the root. And then how about we change the height to about 400, again, doesn't have to be precise. Again, we can negotiate and play around with the size a little bit later on.

[03:54] And then for the width we'll do about the same. All right. And let's put some placeholder text here. So how about for that first label there? We'll select that first label and for the text property instead of just having the text label I'll type in the station and how about a one? And I'll hit enter, for the next label there, we'll go ahead and we'll change the text there. This will be, how about this? We'll just say pump faulted because of the tags that we have, in that UDT we created earlier. We do have a pump fault for each station. So we'll just have like a little banner that appears when there's a fault. So, but for now, we'll just put some texts in there. We'll say Advil pump all did I hit enter And then the vessel here we'll actually have it show, the sort of the liquid level based off of the stations tank capacity. We'll do that, but we'll hook that up in a bit. Okay. So we have the basis for our embedded view. Let's actually take a look at how to create a copy of this. So the first thing you'll want to do is that what you want to save, and then once you saved a project.

[04:56] Let's go back to the overview. So down below, we'll switch back to that overview and let's actually get rid of these cylindrical tanks. So I'm going to click on an empty spot here. I'm just going to click and drag to create a little selection box and we can go ahead and right click and delete those or we can just delete them individually. It doesn't really matter. I just want to get rid of those three. Okay. So when you're ready to create an instance of an embedded view, there's two ways to do it. The more, it's not really hard, but more involved way to do it, would be to head over to the component panel. And I'm going to clear out the search bar here. I'm going to expand everything. Actually I'll collapse everything first and then I'll expand there's this embedding category of property. So the whole point of this category of properties is giving you different ways to create an instance of a view inside of another view. And of these, are arguably the most simplistic component would be the embedded view component. So I can drag this into our view and it's going to look a little silly.

[05:53] That's mostly because it doesn't really have any content inside of it. And again we are trying to center everything with this overview or we've been trying to do that, but that's fine. One of the things we can do is with this component selected we can actually go to the path property here and click the little drop down, and you can see that we actually get a little tree that allows us to browse all of the views and the folders of the views that exist within this project. So I could go into objects. I could select our overview vessel and then click okay. All right. Now I did say that you have some say over how big the components are. I'm actually going to click off the component there and click back on just to clear that little selection box. But if you really liked the way you were setting up the defaults, if you look in the property editor here we do have these use default properties. So I could say, hey, use the default height cause I liked that height, right? And that seems pretty solid. So ultimately we'll end up creating three instances of this, of this view. Now I didn't say there's two ways to sort of go about doing this.

[06:52] So for this next part here, I'm actually going to close the overview vessel tab down below. So to close that, I'll go ahead and I'll just switch over to it. We actually kind of just right click, but that's fine. I'll go ahead and close it here, go up to the project browser and you find a view that's not open. So there isn't a tab for it down below. In this project or in this designer, you can actually just drag and drop and I'll create an instance for you, right? And same thing, we can use the default height. So that's kind of the quicker way to do it. And that's actually the preferable way to do it later when we start talking about parameters which is actually how we're going to round out this video here. So looking at these embedded view components here if you look on the project browser, you'll notice that we don't actually, from the project browser here. And by extension from the normal selection mechanisms here. We don't actually have a way to sort of drill into these embedded views and manipulate the components within. If you needed to make some configuration change you always have to go back to the view definition.

[07:52] So the overview vessel item that we created earlier now that does create a little bit of a problem for us. So later on, I'm just going to duplicate one of these embedded views here. So later on, we're going to have three copies of this. One of them needs to shows station one when these, another needs to show station two and then the last one needs to show station three. And I need to be able to tell these instances which station number they're looking at. So the way this works with views is that you can actually there's a special category of properties called params that exist on views. And the whole point of them is that they're basically user created properties or it's an area for you to create user created properties that are then exposed on the view instances. So basically from these instances, I can pass in parameter values that then the components inside of these instances can reference and then utilize in some way. So let's actually go back to our overview vessel that we created a little bit earlier. So I'll open it again. I'll just double click on it, now with the view object selected.

[08:53] So I'm not selecting like the vessel or anything like that. With the view object selected, views have that unique category properties and it's just called params, just this one right here. I'm going to collapse the rest of it so I can focus on it. So this is kind of a special area. So if you create a property here then you can actually utilize it and pass values to it later on. So I'm going to click the add view parameter little plus button there, and we'll create a value type. So value is just a single value in this case. And let's type in station number and I'll hit the tab key to move over and we'll just type in a value of one for now. Okay. So right now our overview vessel has this little station number, parameter or property but we're not really doing anything with it yet. And that's because we need to start creating bindings or other configurations that use the value of this. So but we're getting a little long here, so we'll stop here. And in the next video, we'll go ahead and we'll create, we'll start creating bindings and we'll start talking about transforms and basically other ways to sort of utilize the station number here.